<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>品牌列表案例</title>
  <!-- 导入样式-->
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <link rel="stylesheet" href="./css/brandlist.css">
  <link href="../../image/favicon.ico" rel="shortcut icon">
  <!-- 导入Vue.js-->
  <script src="./lib/vue-2.6.12.js"></script>
</head>

<body>

  <div id="app">
    <!-- 卡片区域 -->
    <div class="card">
      <div class="card-header">
        添加品牌
      </div>
      <div class="card-body">
        <!-- 添加品牌的表单区域 -->
        <!-- form 表单元素有 submit 事件-->
        <!-- .prevent 来阻止 form 表单 submit 默认提交表单事件-->
        <form @submit.prevent="add">
          <div class="form-row align-items-center">
            <div class="col-auto">
              <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <div class="input-group-text">品牌名称</div>
                </div>
                <!-- 使用 v-model 双向绑定,并且自动过滤用户输入的首尾空白字符-->
                <input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
              </div>
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-2">添加</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 表格区域 -->
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">品牌名称</th>
          <th scope="col">状态</th>
          <th scope="col">创建时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>
            <div class="custom-control custom-switch">
              <!-- 动态绑定 id-->
              <input type="checkbox" class="custom-control-input" :id="'cb' + item.id" v-model="item.status">
              <!-- 使用 v-if 和 v-else 渲染-->
              <label class="custom-control-label" :for="'cb' + item.id" v-if="item.status">已启用</label>
              <label class="custom-control-label" :for="'cb' + item.id" v-else>已禁用</label>
            </div>
          </td>
          <td>{{ item.time | dateFormat}}</td>

          <td>
            <a href="javascript:;" @click="remove(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    // 声明格式化时间的全局过滤器
    Vue.filter('dateFormat',function (time) {
      // 格式化处理
      var date = new Date(time*1);
      var y = date.getFullYear();
      var m = date.getMonth()+1;
      var d = date.getDate();
      var h = date.getHours();
      var mm = date.getMinutes();
      var s = date.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      mm = mm < 10 ? "0" + mm : mm;
      s = s < 10 ? "0" + s : s;
      date = y + "年" + m + "月" + d + "日 " + h + "时" + mm + "分" + s +"秒";
      console.log(date);
      return date
    })

    const vm = new Vue({
      el: '#app',
      data: {
        // 用户输入的品牌名称
        brand: '',
        nextId: 4,

        // 品牌的列表数据
        list: [
          // id,名字,状态,创建时间
          { id: 1,name: '宝马',status: true,time: new Date() },
          { id: 2,name: '长城',status: false,time: new Date() },
          { id: 3,name: '三菱',status: true,time: new Date() },
        ]
      },
      methods: {
        // 点击删除对应的品牌信息
        remove(id) {
          // console.log(id)
          // 过滤出 id 对应的品牌信息,并进行删除（es6 filter() 数组过滤方法）
          this.list = this.list.filter(item => item.id !== id)
        },
        // 阻止表单的默认提交行为后,触发 add 方法
        add() {
          // console.log(this.brand)
          // 如果判断 brand 为空字符串,则 return 出去
          if(this.brand === '') {
            alert('请输入品牌名称!')
            return
          }
          // 如果没有被 return 出去,则进行添加
          // 1. 先把添加的品牌对象整理出来
          const obj = {
            id: this.nextId,
            name: this.brand,
            status: true,
            time: new Date(),
          }
          // 2. 往 this.list 数组中 push 步骤1中得到的对象
          this.list.push(obj)
          // 3. 清空 this.brand;让 this.nextId 自增 +1
          this.brand = ''
          this.nextId++

        }
      }
    })
  </script>


</body>

</html>